import React, { useState } from "react";

interface AIChatProps {
    isOpen: boolean;
    onClose: () => void;
}

interface Message {
    type: "user" | "ai";
    content: string;
}

const AIChat: React.FC<AIChatProps> = ({ isOpen, onClose }) => {
    const [messages, setMessages] = useState<Message[]>([
        { type: "ai", content: "你好！我是AI助手，有什么可以帮助你的吗？" },
    ]);
    const [input, setInput] = useState("");

    const handleSendMessage = () => {
        if (!input.trim()) return;

        // 添加用户消息
        const userMessage: Message = { type: "user", content: input };
        setMessages((prev) => [...prev, userMessage]);

        // 模拟AI回复
        setTimeout(() => {
            const aiResponses = [
                "我理解你的问题，让我来帮你分析一下...",
                "这是一个很有趣的问题，我的建议是...",
                "根据我的分析，我认为...",
                "谢谢你的提问，让我为你详细解释...",
                "这是一个很好的观点，我补充一下...",
            ];
            const randomResponse =
                aiResponses[Math.floor(Math.random() * aiResponses.length)];
            const aiMessage: Message = { type: "ai", content: randomResponse };
            setMessages((prev) => [...prev, aiMessage]);
        }, 1000);

        setInput("");
    };

    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (e.key === "Enter") handleSendMessage();
    };

    if (!isOpen) return null;

    return (
        <div
            style={{
                position: "fixed",
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                backgroundColor: "rgba(0,0,0,0.8)",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                zIndex: 1000,
            }}
        >
            <div
                style={{
                    width: "90%",
                    maxWidth: 600,
                    height: "80%",
                    backgroundColor: "#fff",
                    borderRadius: 20,
                    display: "flex",
                    flexDirection: "column",
                    overflow: "hidden",
                    boxShadow: "0 20px 60px rgba(0,0,0,0.3)",
                }}
            >
                {/* 对话框头部 */}
                <div
                    style={{
                        padding: "20px 24px",
                        borderBottom: "1px solid #e0e0e0",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "space-between",
                        background:
                            "linear-gradient(90deg, #667eea 0%, #764ba2 100%)",
                        color: "#fff",
                    }}
                >
                    <div
                        style={{
                            display: "flex",
                            alignItems: "center",
                            gap: 12,
                        }}
                    >
                        <span
                            role="img"
                            aria-label="AI"
                            style={{ fontSize: 24 }}
                        >
                            🤖
                        </span>
                        <h3
                            style={{ margin: 0, fontSize: 20, fontWeight: 600 }}
                        >
                            AI助手
                        </h3>
                    </div>
                    <button
                        onClick={onClose}
                        style={{
                            background: "none",
                            border: "none",
                            color: "#fff",
                            fontSize: 24,
                            cursor: "pointer",
                            padding: 4,
                        }}
                    >
                        ✕
                    </button>
                </div>

                {/* 消息列表 */}
                <div
                    style={{
                        flex: 1,
                        padding: "20px",
                        overflowY: "auto",
                        display: "flex",
                        flexDirection: "column",
                        gap: 16,
                    }}
                >
                    {messages.map((message, index) => (
                        <div
                            key={index}
                            style={{
                                display: "flex",
                                justifyContent:
                                    message.type === "user"
                                        ? "flex-end"
                                        : "flex-start",
                            }}
                        >
                            <div
                                style={{
                                    maxWidth: "70%",
                                    padding: "12px 16px",
                                    borderRadius: 18,
                                    backgroundColor:
                                        message.type === "user"
                                            ? "#e8f4fd"
                                            : "#f0f0f0",
                                    color:
                                        message.type === "user"
                                            ? "#000"
                                            : "#333",
                                    fontSize: 16,
                                    lineHeight: 1.4,
                                    border:
                                        message.type === "user"
                                            ? "1px solid #b3d9ff"
                                            : "none",
                                }}
                            >
                                {message.content}
                            </div>
                        </div>
                    ))}
                </div>

                {/* 输入区域 */}
                <div
                    style={{
                        padding: "20px",
                        borderTop: "1px solid #e0e0e0",
                        display: "flex",
                        gap: 12,
                    }}
                >
                    <input
                        type="text"
                        value={input}
                        onChange={(e) => setInput(e.target.value)}
                        onKeyDown={handleInputKeyDown}
                        placeholder="输入你的问题..."
                        style={{
                            flex: 1,
                            padding: "12px 16px",
                            borderRadius: 25,
                            border: "2px solid #e0e0e0",
                            fontSize: 16,
                            outline: "none",
                        }}
                    />
                    <button
                        onClick={handleSendMessage}
                        style={{
                            padding: "12px 24px",
                            borderRadius: 25,
                            border: "none",
                            background:
                                "linear-gradient(90deg, #667eea 0%, #764ba2 100%)",
                            color: "#fff",
                            fontSize: 16,
                            fontWeight: 600,
                            cursor: "pointer",
                        }}
                    >
                        发送
                    </button>
                </div>
            </div>
        </div>
    );
};

export default AIChat;
